import { throttle } from 'lodash'
import { Watch, Component, Vue } from 'vue-property-decorator'
import { Driver } from './sync'

@Component
export default class Store extends Vue {
  // drivers: Driver[] = []

  localDrivers: Driver[] = null as any

  get drivers () {
    if (this.localDrivers) return this.localDrivers
    this.localDrivers = this.$storage?.get('local_doc_list') || []
    return this.localDrivers
  }

  set drivers (value: Driver[]) {
    this.localDrivers = value
    // this.$storage.set('local_doc_list', value)
  }

  reloadDrivers () {
    this.localDrivers = this?.$storage?.get('local_doc_list') || []
  }

  saveDrivers () {
    if (this.$storage) {
      this.$storage.set('local_doc_list', this.drivers || [])
    }
  }

  created () {
    // this.$once('hook:beforeDestroy', function () {
    //   this.saveDrivers()
    // })
  }

  @Watch('drivers') driversChange () {
    this.saveDrivers()
  }
}

export const store = new Store()
